<template>
	<view class="content">
		<my-bar> 
			<block slot="content">{{ title }}</block>
			<!--#ifdef MP-WEIXIN-->
			<block slot="backText"><button class="cu-btn bg-gradual-green margin-right-xs" @click.stop="postForm.id?update():submit()">保存</button></block>
			<!--#endif-->
			<!--#ifndef MP-WEIXIN-->
			<block slot="right"><button class="cu-btn bg-gradual-green margin-right-xs" @click.stop="postForm.id?update():submit()">保存</button></block>
			<!--#endif-->
		</my-bar> 
		<form>  
			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->		
			<view class="cu-form-group margin-top-xs">	
			    <view class="title">标题</view>
				<input placeholder="请输入标题" name="name" v-model="postForm.name"/>
			</view>
			<view class="cu-form-group margin-top-xs">
				<view class="title">编号</view>
				<input placeholder="请输入编号" name="sn" v-model="postForm.sn"/>
			</view>
			<view class="cu-form-group">			
				<textarea rows="1000" :adjust-position="false" @input="textareaInput" placeholder="请输入宿舍描述...">					
				</textarea> 
			</view>
			<view class="cu-form-group margin-top-xs">
				<view class="title">排序</view>
				<input placeholder="请输入排序" name="order" type="number" v-model="postForm.order"/>
			</view>
			<radio-group class="block" @change="postForm.open=!postForm.open">
				<view class="cu-form-group">		
				<view class="title">公开</view>
				<view>
					是<radio class='margin-left-sm margin-right' :class="postForm.open==true?'checked':''" :checked="postForm.open==true?true:false" v-model="postForm.open"></radio>
					否<radio class='margin-left-sm' :class="postForm.open==false?'checked':''" :checked="postForm.open==false?true:false" v-model="postForm.open"></radio>
				</view>
				</view>		
			</radio-group> 
			<!--
			<view class="cu-bar bg-white text-grey shadow shadow-lg">
			<textarea rows="1000" :adjust-position="false" @input="textareaInput" placeholder="聊聊有趣的事,让课堂更精彩...">
			</textarea>
				<view class="action text-xs">{{ postForm.content.length }}/{{ publish.contentTextCount }}</view>
				<view class="action"></view>
			</view>
			-->
			<!--
			<view class="cu-form-group img-list">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="viewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red text-df" @tap.stop="delImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids " @tap="chooseImage" v-if="imgList.length < publish.uploadImgCount">
						<text class="cuIcon-cameraadd">
							<text class="text-sm">{{ imgList.length }}/{{ publish.uploadImgCount }}</text>
						</text>
					</view>
				</view>
			</view>
			-->
			<!--
			<view class="cu-form-group tag-title"><text class="text-gree">#标签</text></view>
			<view class="cu-form-group padding-sm flex flex-wrap justify-around">-->
				<!-- :class="'bg-'+randomColor(index)" -->
				<!--
				<view
					class="cu-tag radius padding margin-xs"
					:class="CategoryId == item.id ? 'bg-orange' : ''"
					v-for="(item, index) in tags.list" v-if="index!=0"
					:key="index"
					:data-id="item.id"
					@click="switchTag"
				>
					{{ item.text }}
				</view>
			</view>
			-->
			<app-modal ref="modal" content="主人真的要无情的抛弃我吗？" :buttons="['再想想', '残忍说再见']"></app-modal>
		    <!-- <button class="cu-btn bg-red margin-tb-sm lg">发布</button> -->
		</form>
	</view>  
</template>

<script>
import appModal from '@/components/my-modal/my-modal.vue';
import pageMixin from '@/mixin/page.js';
import api from '@/common/api.js';
import http from '@/common/http.js';
import { mapState } from 'vuex';
export default {
	components: {
		appModal
	},
	mixins: [pageMixin],
	data() {
		return {
			imgList: [],//本地选择的图片列表
			postForm:{//提交到服务器的的表单数据
			    id:null,//增加不能传id，修改必须传id
				name: '',
				sn:"",
				detail: '', 
				open: true,
				order:0
			}
		};
	},
	onLoad(e) {
		this.postForm.id = e.id;//接受传递过来的参数
		if(this.postForm.id){//id不为空表示修改	获取详细信息
			this.getDetail()
		}
	},
	methods: {
		textareaInput(e) {
			this.detail = e.detail.value;
		},
		//验证规则检查
		check() {
			//验证规则
			let validRules = [
				{
					name: 'name',
					title: '名称',
					required: true,
					/*minLength: 4*/
				},
				{
					name: 'sn',
					/*type: 'password',*/
					title: 'sn编码',
					required: true,
					/*minLength: 4 */
				} 
			];
			return this.$validate.valid(this.postForm, validRules);
		},
		submit(e) {//提交		
			this.$util.msg("nihhhhdsee电风扇分数段樊登读书是")
			//提前检查是否登录
			if(!api.checkLogin()){
				return false;
			}
			//验证规则检查			
			var r = this.check();
			if (!r.isOk) {
				this.$util.msg(r.msg);
				return; 
			} 
			var that = this;
			function save() {//保存方法
				api.submit(
					that.$store.state.pages.admin.dormitory.add.url,//提交的服务器api地址
					that.postForm,//提交的表单数据
					function() {
						//回调函数：保存成功跳转到列表页面
						that.$util.goTo(that.$store.state.pages.admin.dormitory.list.path);
					}
				);
			}
			if (this.imgList.length > 0) { //有图片则先上传图片
				api.upload({
					path: that.imgList[0],
					callback: function(res) {										
						res = JSON.parse(res.data);						
						if(!res.status){
							that.$util.msg(res.msg)
						}else{//再提交保存
						    that.postForm.pic=res.data.path;//将上传后的图片地址保赋值给要提交的表单数据
							save();
						}					
					}
				});
			} else {//否则直接保存
				save();
			}
		},
		getDetail(){//修改 获取详细信息
		    
			http.get(this.$store.state.pages.admin.dormitory.detail.url+"/"+this.postForm.id).then(res=>{
                if(res.status){
					Object.assign(this.postForm,res.data)//将获取的数据复制到表单对象
				}
			}) 
		},
		update(){//修改 
		    //提前检查是否登录
		    if(!api.checkLogin()){
		    	return false;
		    }
		    //验证规则检查			
		    var r = this.check();
		    if (!r.isOk) { 
		    	this.$util.msg(r.msg);
		    	return; 
		    } 
			
			http.post(this.$store.state.pages.admin.dormitory.update.url,this.postForm).then(res=>{
		        this.$util.msg(res.msg)
				this.$util.goTo(this.$store.state.pages.admin.dormitory.list.path);	
			})
		},
		chooseImage() {
			var that = this; 
			uni.chooseImage({
				count: that.publish.uploadImgCount, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					if (this.imgList.length != 0) {
						this.imgList = this.imgList.concat(res.tempFilePaths);
					} else {
						this.imgList = res.tempFilePaths;
					}
				}
			});
		},
		viewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		delImg(e) {
			var that = this;
			this.$refs.modal.open(function() {
				that.imgList.splice(e.currentTarget.dataset.index, 1);
			});
		},
		randomColor(idx) {
			if (idx >= this.colors.length) {
				idx = idx % this.colors.length;
			}
			return this.colors[idx];
		}
	},
	computed: {
		...mapState('base', ['tags', 'publish', 'colors']),
		title() { 
			return this.postForm.id?this.$store.state.pages.admin.dormitory.update.text:this.$store.state.pages.admin.dormitory.add.text
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
}

.cu-form-group {
	/*border: none;*/
}
.cu-form-group.title {	
	/*border-bottom: 1px solid #eee;*/
}
.cu-form-group textarea{
	height: 200rpx;
}
.cu-form-group + .cu-form-group {
	/*border-top: 0;*/
}

.cu-form-group.tag-title {
	margin-top: 35rpx;
	border-top: 1px solid #eee;
}

.cu-form-group .title {
	min-width: calc(4em + 15px);	
}

.cu-bar .action.text-xs {
	font-size: 12px;
}

.img-list {
	padding-top: 14px;
}
</style>
